import { _decorator, Component, Node, Label, Sprite } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { Merge, MergeASAP } from '../../../../scripts/libs/rxjs/cc3/Merge';
import dynamicScrollViewItem from '../../../../scripts/libs/utils/DynmicScrollView/dynamicScrollViewItem';
import { SpriteFrame } from 'cc';
import { color } from 'cc';
import { pfm } from '../../../../scripts/managers/PlayFabManager';
import { gm } from '../../../../scripts/managers/GameManager';
import { UIOpacity } from 'cc';
const { ccclass, property } = _decorator;

const _color_normal = color().fromHEX('#0E1D45');
const _color_me = color().fromHEX('#164710');

@ccclass('LeaderboardItem')
export class LeaderboardItem extends dynamicScrollViewItem {

    @property
    solo = false;

    @property([SpriteFrame])
    boardSpriteFrames: SpriteFrame[] = [];

    @property([SpriteFrame])
    trophySpriteFrames: SpriteFrame[] = [];

    @property(Sprite)
    boardSprite: Sprite = null;

    @property(Label)
    rankLabel: Label = null;

    @property(Sprite)
    trophySprite: Sprite = null;

    @property(Label)
    nameLabel: Label = null;

    @property(Label)
    scoreLabel: Label = null;

    entityId = ReactiveProperty.Create<string>(null);

    isMe = ReactiveProperty.Create(false);

    useObserves() {
        return [
            MergeASAP(this.entityId, pfm.entityId).subscribe(this.refresh.bind(this)),
            Merge(this.isMe, gm.myLeaderboardItemHide).subscribe(this.isMeChanged.bind(this)),
        ];
    }

    refresh() {
        if (pfm.entityId.value == this.entityId.value) {
            this.isMe.value = true;
        } else {
            this.isMe.value = false;
        }
    }

    setItem(data) {
        // cc.log('请在子类实现setItem函数以显示');
        this.data = data;
        if (this.data._status == 2) {
            this.node.active = false;
        } else if (this.data._status == 1) {
            this.node.active = true;
            this.entityId.value = this.data.ranking.Entity.Id;
            this.nameLabel.string = `${this.data.ranking.DisplayName}`;
            this.rankLabel.string = `${this.data.ranking.Rank}`;
            this.scoreLabel.string = `${this.data.ranking.Scores[0]}`;
            if (this.data.ranking.Rank <= 3) {
                this.rankLabel.node.active = false;
                this.trophySprite.node.active = true;
                this.trophySprite.spriteFrame = this.trophySpriteFrames[this.data.ranking.Rank - 1];
            } else {
                this.rankLabel.node.active = true;
                this.trophySprite.node.active = false;
                this.trophySprite.spriteFrame = null;
            }
        } else {
            this.node.active = true;
            this.entityId.value = null;
            this.nameLabel.string = `...`;
            this.rankLabel.string = `${this.data.rank + 1}`;
            this.scoreLabel.string = `-`;
            this.rankLabel.node.active = true;
            this.trophySprite.node.active = false;
        }
    }

    isMeChanged() {
        if (this.isMe.value) {
            this.nameLabel.color = _color_me;
            this.boardSprite.spriteFrame = this.boardSpriteFrames[1];
            // if (gm.myLeaderboardItemHide.value || this.solo) this.getComponent(UIOpacity).opacity = 255;
            // else this.getComponent(UIOpacity).opacity = 0;
        } else {
            this.nameLabel.color = _color_normal;
            this.boardSprite.spriteFrame = this.boardSpriteFrames[0];
            this.getComponent(UIOpacity).opacity = 255;
        }
    }
}

